<nz-modal
    [(nzVisible)]="isVisible"
    [nzTitle]="modalTitle"
    [nzContent]="modalContent"
    [nzFooter]="modalFooter"
    (nzOnCancel)="handleCancel()"
    [nzMaskClosable]="false"
>
    <ng-template #modalTitle>
        属性选择器
    </ng-template>

    <ng-template #modalContent>
        <p>输入一个WHERE子句，以选择不同的记录</p>
        <div class="props-list">
            <div class="prop" *ngFor="let prop of allProps" [class.selected]="currentProp === prop"
                 (click)="setCurrentProp(prop)" (dblclick)="writeSqlByProp(prop)">
                "{{prop}}"
            </div>
        </div>
        <div class="logical-btns">
            <button class="btn-item" [nzSize]="'small'" *ngFor="let btn of logicalBtns" nz-button
                    (click)="writeSqlByBtn(btn)">
                {{btn.label}}
            </button>
        </div>
        <div class="unique-vals-container">
            <div class="unique-vals">
                <div class="val" *ngFor="let val of uniqueValues" (click)="setCurrentValue(val)"
                     (dblclick)="writeSqlByValue(val)">
                    {{val}}
                </div>
            </div>
            <button nz-button class="get-props-value" [disabled]="!currentProp" [nzLoading]="valuesLoading" (click)="getUniqueValues()">获取唯一值</button>
        </div>
        <div class="sql-operation-container">
            <p>SQL语句显示框</p>
            <textarea #sqlTextarea id="hexTest" class="sql-display" autofocus [(ngModel)]="sqlString"></textarea>
        </div>
    </ng-template>

    <ng-template #modalFooter>
        <button nz-button nzType="default" (click)="clearFilter()">重置</button>
        <!--<button nz-button nzType="default" (click)="checkSql()">验证</button>-->
        <button nz-button nzType="default" (click)="applyFilter()" [nzLoading]="applyLoading">应用</button>
    </ng-template>
</nz-modal>
